page-irp-panoramagram-home
{

  .name{
    //font-weight: bolder;
  }
  .color{
    color: #51a7e8;
  }
  .greenColor{
    color: green;
  }
	.content-center {
		text-align: center;
	}
	ion-label {
		text-align: justify;
	}
    ion-avatar
    {
        img
        {
            padding: 5px !important;

            border-radius: 0 !important;
        }
    }

  .DataGrid {
    .GridTitle {
	  padding-left: 0px !important;
	  ion-col {
		  white-space: normal;
	  }
    }
    .GridContent {
      padding-left: 0px !important;
    }
    ion-item {
      //padding-left: 0px !important;
      min-height: 0 !important;
      font-size: 1.3rem;
      .item-inner {
        padding-right: 0px !important;
      }
      ion-label {
        margin: 0 !important;
      }
    }
    .GridTitle {
      background-color: #fdb28c;

      ion-row {
        font-weight: 600;
        color: white;
      }
    }

    .GridContent {
      ion-row {
        .productname {
          //overflow: hidden !important;
          //text-overflow: ellipsis !important;
          white-space: normal !important;
        }
      }
    }

    .ContentColorUp:nth-child(2n) {
       background-color: #fbe8cd;
     }

    .ContentColorUp:nth-child(2n + 1) {
      background-color: #fddfc6;
    }

    .ContentColorDown:nth-child(2n) {
      background-color: #d7e5f7;
    }

    .ContentColorDown:nth-child(2n + 1) {
      background-color: #e7eff7;
    }
  }

  .DataGraph {
    //padding-top:50px;
  }

  .TitleDescription {
    white-space: normal;
    word-break: break-all;
    font-size: 1.6rem;
    line-height: 30px;
    color: #666;
    text-overflow: clip;
    .redColor {
      white-space: nowrap !important;
      text-overflow: clip !important;
    }
  }
  .Title {
    font-weight: 900!important;
    line-height: 30px !important;
    padding: 0px !important;
    //span {
    //  background-color: color($colors, primary) !important;
    //  padding: 5px;
    //  color: white;
    //  margin-right: 10px;
    //}
    i,
    h3 {
      //padding:  10px;
      display: inline-block;
      font-weight: bold;
      font-size: 1.6rem;
    }
    i {
      height: 100%;
      margin-right: 10px;
      background-color: color($colors, primary);
      padding: 0 10px;
      color: #ffffff;
    }
    .bgc{
      justify-content: flex-start;
    }
    .widthmy{
      width: 30px;
      height: 30px;
      margin-right: 5px;
      background-color: color($colors, primary);
    }
    div{
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: space-between;
      align-items: center;
      font-size: 1.4rem;
      font-weight: bold;
      ion-icon{
        margin-right: 10px;
      }
    }
    span{
      width: 100px;
    }
    .middle{
      flex-grow: 1;
      text-align: center;
    }
    .right{
      text-align: right;
    }
  }

  .DataTable {
    padding: 11px 16px 11px 16px !important;
  }

  #CompanyScaleTrend {
    margin-top: -60px;
  }

  .width-18 {
    width: 18% !important;
    max-width: 18% !important;
  }

  .width-21 {
    width: 21% !important;
    max-width: 21% !important;
  }

  .TitleIonItem {
      ion-label {
        text-overflow: clip !important;
      }
  }
}
